<template>
  <div class="opportunity w1200">
    <supplier-display-header style="padding: 25px 20px;" title="商机资讯" :showMore="false"></supplier-display-header>
    <div class="opportunityBox">
      <div class="firstItem">
        <img class="mainImg" src="@/assets/images/supplierDisplayCenter/bid.png" />
      </div>
      <div class="opportunityItem">
        <div class="opportunityItemTop">
          <h4>“启航”社区一期建设学生用多功能桌椅...</h4>
          <div>
            <img class="icon" src="@/assets/images/supplierDisplayCenter/icon.png" />
            <span class="company">深圳市天宇科技有限责任公司
            </span>
          </div>
        </div>
        <div class="opportunityItemBottom">
          <div class="opportunList">
            <span>预算：</span>
            <span class="red">￥960,650.00</span>
          </div>
          <div class="opportunList">
            <span>倒计时：</span>
            <a-statistic-countdown :valueStyle="{ fontSize: '12px', display: 'inline-block' }" :value="deadline"
              format="D 天 H 时 m 分 s 秒" />

          </div>
          <div class="opportunList">
            <span>项目截至时间</span>
            <span>2023-08-16 15:00</span>
          </div>
        </div>
      </div>
      <div class="opportunityItem">
        <div class="opportunityItemTop">
          <h4>“启航”社区一期建设学生用多功能桌椅...</h4>
          <div>
            <img class="icon" src="@/assets/images/supplierDisplayCenter/icon.png" />
            <span class="company">深圳市天宇科技有限责任公司
            </span>
          </div>
        </div>
        <div class="opportunityItemBottom">
          <div class="opportunList">
            <span>预算：</span>
            <span class="red">￥960,650.00</span>
          </div>
          <div class="opportunList">
            <span>倒计时：</span>
            <a-statistic-countdown :valueStyle="{ fontSize: '12px', display: 'inline-block' }" :value="deadline"
              format="D 天 H 时 m 分 s 秒" />

          </div>
          <div class="opportunList">
            <span>项目截至时间</span>
            <span>2023-08-16 15:00</span>
          </div>
        </div>
      </div>
      <div class="opportunityItem">
        <div class="opportunityItemTop">
          <h4>“启航”社区一期建设学生用多功能桌椅...</h4>
          <div>
            <img class="icon" src="@/assets/images/supplierDisplayCenter/icon.png" />
            <span class="company">深圳市天宇科技有限责任公司
            </span>
          </div>
        </div>
        <div class="opportunityItemBottom">
          <div class="opportunList">
            <span>预算：</span>
            <span class="red">￥960,650.00</span>
          </div>
          <div class="opportunList">
            <span>倒计时：</span>
            <a-statistic-countdown :valueStyle="{ fontSize: '12px', display: 'inline-block' }" :value="deadline"
              format="D 天 H 时 m 分 s 秒" />

          </div>
          <div class="opportunList">
            <span>项目截至时间</span>
            <span>2023-08-16 15:00</span>
          </div>
        </div>
      </div>
      <div class="opportunityItem">
        <div class="opportunityItemTop">
          <h4>“启航”社区一期建设学生用多功能桌椅...</h4>
          <div>
            <img class="icon" src="@/assets/images/supplierDisplayCenter/icon.png" />
            <span class="company">深圳市天宇科技有限责任公司
            </span>
          </div>
        </div>
        <div class="opportunityItemBottom">
          <div class="opportunList">
            <span>预算：</span>
            <span class="red">￥960,650.00</span>
          </div>
          <div class="opportunList">
            <span>倒计时：</span>
            <a-statistic-countdown :valueStyle="{ fontSize: '12px', display: 'inline-block' }" :value="deadline"
              format="D 天 H 时 m 分 s 秒" />

          </div>
          <div class="opportunList">
            <span>项目截至时间</span>
            <span>2023-08-16 15:00</span>
          </div>
        </div>
      </div>
      <div class="opportunityItem">
        <div class="opportunityItemTop">
          <h4>“启航”社区一期建设学生用多功能桌椅...</h4>
          <div>
            <img class="icon" src="@/assets/images/supplierDisplayCenter/icon.png" />
            <span class="company">深圳市天宇科技有限责任公司
            </span>
          </div>
        </div>
        <div class="opportunityItemBottom">
          <div class="opportunList">
            <span>预算：</span>
            <span class="red">￥960,650.00</span>
          </div>
          <div class="opportunList">
            <span>倒计时：</span>
            <a-statistic-countdown :valueStyle="{ fontSize: '12px', display: 'inline-block' }" :value="deadline"
              format="D 天 H 时 m 分 s 秒" />

          </div>
          <div class="opportunList">
            <span>项目截至时间</span>
            <span>2023-08-16 15:00</span>
          </div>
        </div>
      </div>
      <div class="opportunityItem">
        <div class="opportunityItemTop">
          <h4>“启航”社区一期建设学生用多功能桌椅...</h4>
          <div>
            <img class="icon" src="@/assets/images/supplierDisplayCenter/icon.png" />
            <span class="company">深圳市天宇科技有限责任公司
            </span>
          </div>
        </div>
        <div class="opportunityItemBottom">
          <div class="opportunList">
            <span>预算：</span>
            <span class="red">￥960,650.00</span>
          </div>
          <div class="opportunList">
            <span>倒计时：</span>
            <a-statistic-countdown :valueStyle="{ fontSize: '12px', display: 'inline-block' }" :value="deadline"
              format="D 天 H 时 m 分 s 秒" />

          </div>
          <div class="opportunList">
            <span>项目截至时间</span>
            <span>2023-08-16 15:00</span>
          </div>
        </div>
      </div>
      <div class="opportunityItem">
        <div class="opportunityItemTop">
          <h4>“启航”社区一期建设学生用多功能桌椅...</h4>
          <div>
            <img class="icon" src="@/assets/images/supplierDisplayCenter/icon.png" />
            <span class="company">深圳市天宇科技有限责任公司
            </span>
          </div>
        </div>
        <div class="opportunityItemBottom">
          <div class="opportunList">
            <span>预算：</span>
            <span class="red">￥960,650.00</span>
          </div>
          <div class="opportunList">
            <span>倒计时：</span>
            <a-statistic-countdown :valueStyle="{ fontSize: '12px', display: 'inline-block' }" :value="deadline"
              format="D 天 H 时 m 分 s 秒" />

          </div>
          <div class="opportunList">
            <span>项目截至时间</span>
            <span>2023-08-16 15:00</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
    
<script>
import SupplierDisplayHeader from './SupplierDisplayHeader'
import storage from '@/utils/storage'

export default {
  name: 'opportunity',
  components: {
    SupplierDisplayHeader
  },
  data() {
    return {
      deadline: Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30,
    }
  },

  mounted() {
  },
  methods: {

  }
}
</script>
    
<style scoped lang="scss">
$mainColor: #3370FF;

/deep/ .ant-statistic {
  display: inline-block;
}

.firstItem {
  width: 300px;
  height: 180px;
}

.red {
  color: #FF4D4F;
}

.opportunity {
  // box-shadow: 0px 4px 20px 0px rgba(0, 120, 254, 0.1);
  border-radius: 10px;
  margin-top: 20px !important;
  overflow: hidden;
}

.opportunityBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.opportunityItem {
  width: 300px;
  height: 180px;
  border: 1px solid #E2E2E2;
  background-color: #fff;
  padding: 10px;

  .mainImg {
    width: 100%;
    height: 100%;
  }

  .opportunityItemTop {
    border-bottom: 1px solid #E2E2E2;
    padding: 5px 0;
    margin-bottom: 10px;

    h4 {
      font-size: 14px;
      font-weight: 500;
    }

    .icon {
      vertical-align: middle;
    }

    .company {
      vertical-align: middle;
      font-size: 12px;
      color: #909090;
    }
  }
}

.opportunList {
  line-height: 30px;
}</style>
    